<template>
 <div class="index-conintner">
  <header>
     <div class='header-left' @click="ishow">
     <span class="yo-ico">&#xe650;</span><span>{{city}}</span>
     </div>
      <van-popup v-model="show"  position="top"
  :style="{ height: '100%' }"  :overlay="false">
  <div>
   <div class="hotcity">
       <p ref="hot">热门城市/区域</p>
       <ul>
           <li 
           v-for="(value,index) in hotcity"
           :key="value+index"
           @click="hotclick(value)"
           > 
           {{value}}            
           </li>
       </ul>
   </div>
   <div id="city-lists" class="allcity">
     <ol>
       <li
        v-for="(value,index) in allcities"
        :key="value+index"
        ref="value.letter"
        > <h4>{{value.letter}}</h4>        
        <p 
        v-for="(value,index) in value.data"
        :key="value+index"
        @click="hotclick(value)"
        >{{value}} </p>  </li>
     </ol>
   </div>
  </div>
  </van-popup>
     <router-link tag="div" to="/search" class='header-ipt'>  <span class="yo-ico">&#xe643;</span> <span>
        搜索明星、演出比赛、场馆
    </span> </router-link>
     <div class='header-right'>
      <span  @click="tologin" class="yo-ico">&#xe660;</span>
     </div>
  </header>
  <main>
  <div class="wrap">
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(value,index) in listimg" 
           :key="index+value"
        ><img :src="value.verticalPic" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
  </div>
<div class="nav">
   <ul >
      <router-link  tag="li"  :to="`/classify/演唱会`" ><span class="yo-ico">&#xe616;</span><p>演唱会</p></router-link>
      <router-link tag="li" :to="`/classify/话剧歌剧`"><span class="yo-ico">&#xf0fd;</span><p>话剧歌剧</p></router-link>
      <router-link tag="li" :to="`/classify/音乐会`"><span class="yo-ico">&#xea2e;</span><p>音乐会</p></router-link>
      <router-link tag="li" :to="`/classify/体育`" ><span class="yo-ico">&#xe6e0;</span><p>体育</p></router-link>
      <router-link tag="li" :to="`/classify/曲苑杂坛`"><span class="yo-ico">&#xe671;</span><p>曲艺杂谈</p></router-link>
      <router-link tag="li" :to="`/classify/亲子`" ><span class="yo-ico">&#xe6a8;</span><p>亲子</p></router-link>
      <router-link tag="li" :to="`/classify/展览休闲`" ><span class="yo-ico">&#xe944;</span><p>展览休闲</p></router-link>
      <router-link tag="li" :to="`/classify/境外`"><span class="yo-ico">&#xe710;</span><p>境外</p></router-link>
   </ul>
</div>
<div class="golbal-ad"></div>

<div class="last-show">
   <div class="last-title">
      <span>近期演出</span>
      <span @click="clickdate">演出日历<i class="yo-ico">&#xf07f;</i></span>
   </div>
   <div class="last-week">
      <ul>
          <li  v-for="(value,index) in datelist"
              :key="value+index" 
              @click="handleclick1(index)"
              :class="{active:isactive==index}"
          >{{value}}</li>
      </ul>
   </div>
   <div class="last-wrap">
      <ul>
         <li  v-for="(value,index) in list"  @click="handleclick2(value)"
              :key="value+index" > <div> <img :src="value.verticalPic" alt=""> </div><div>{{value.name}}<p>￥{{value.price}} 起</p></div></li>        
      </ul>
   </div>
</div>
 
<div class="more-show">
   <h2>更多演出</h2>
   <div class="more-list">

   </div>  
   <Moreitem></Moreitem>
  
  
</div>
  </main>
 </div>

</template>

<script>
import Vue from 'vue';
import '../styles/common.styl'
import city from  '../utils/city.js' 
import Swiper from 'swiper';  
import {get} from  '../utils/http.js'  
import getJSON from  '../utils/jsonp.js' 
import BScroll from 'better-scroll' 
import moment from 'moment'
import Moreitem from '../components/Home/more-item'
import { Popup } from 'vant';
Vue.use(Popup)
export default {
data () {
   return {
     datelist:['全部','今天','明天','本周末','本月内'],
     list:[],
     tsg:0,
     listimg:[],
      hotcity:[],
      allcities:[],
      hotall:'北京',
      show:false,
      city:'北京',
      isactive:0
   }
},
methods: {
   handleclick2(value){
    let arr=[]
  arr.push(value)
  this.$router.push({
    path:`/detail/${value.id}`,
    query:{
      list2:arr
    } 
  })
   },
   tologin(){
      if(this.$store.state.islogin){
      this.$router.push('/my')
      }else{
         this.$router.push('/login')
      }
   },
   ishow(){
 this.show=true
   },
 async  hotclick(value){
   let resultimg = await get({
      url:`https://api-gw.damai.cn//search.html?cat=1&destCity=${value}&_ksTS=1574161616069_101&callback=jsonp102`    
    })
   this.listimg=JSON.parse(resultimg.data.slice(9,resultimg.data.length-1)).data 
     this.show=false
     this.city=value
   },
async  handleclick1(index){  
   this.isactive=index
    let result = await get({
      url:`https://search.damai.cn/searchajax.html?keyword=&cty=${this.city}&ctl=&sctl=&tsg=${~~index}&st=&et=&order=1&pageSize=10&currPage=1&tn=`    
    })
    this.list=result.data.pageData.resultData
},
clickdate(){
   this.$router.push({
      path:'/classify/演唱会',
      query:{
         open:true
      }
   })
}
},
components: {
   Moreitem,
  
},
async mounted (){
   this.hotcity=city.hotCities
   this.allcities=city.allCities

   let resultimg = await get({
      url:`https://api-gw.damai.cn//search.html?cat=1&destCity=上海&_ksTS=1574161616069_101&callback=jsonp102`    
    })
   this.listimg=JSON.parse( resultimg.data.slice(9,resultimg.data.length-1)).data
    
   
 let result = await get({
      url:`https://search.damai.cn/searchajax.html?keyword=&cty=&ctl=&sctl=&tsg=0&st=&et=&order=1&pageSize=10&currPage=1&tn=`    
    })
     this.list=result.data.pageData.resultData 
     
 var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项   
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
     autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    }
  })
   let bScroll = new BScroll('.index-conintner', {
      pullUpLoad: true,
      click: true,
      probeType: 2
    })
 
} 
}
</script>

<style lang="stylus" scoped>

.index-conintner
   height 100%
   width 100%
   display flex
   flex-direction column
   header 
      display flex
      flex-direction row
      align-items center
      justify-content space-between
      height 1rem
      width 100%
      padding-right  0.36rem
      .header-left
         width 1.105rem
         height 0.416rem
         font-size 0.32rem
         color #222222
         margin 0  0  0  .36rem
         >span:first-child
            display inline-block
            font-size 0.4rem
            margin-top -0.15rem
            margin-right 0.05rem
         
      .header-ipt
         display flex
         align-items center
         font-size 0.28rem
         border 1px solid white 
         border-radius 0.3rem
         padding 0 0 0 0.36rem
         background white
         color #999999
         padding-right 0.36rem
      >span:first-child
         font-size 0.4rem
         padding-right 0.1rem
      .header-right
         display flex
         align-items center
         font-size 0.55rem  
   main
     width 100%
     height 100%
     overflow-y scroll
     .wrap
        height 2.82rem
        background white
        .swiper-container 
           --swiper-pagination-color: #ffffff
           width 100%
           height 2.82rem 
           img 
            height 100%
            width 100%
      .nav
         height 3.18rem
         width 100% 
         font-size 0.24rem
         color #222222
         padding 0.36rem 0 0.18rem
         background white
         ul
          display flex
          flex-direction row
          flex-wrap wrap
          li
           width 25%
           text-align center
           span 
             font-size 0.6rem
      .golbal-ad
         height 2.4rem
         width 100% 
         background-color white      
         background-image  url('http://img.alicdn.com/tps/i4/TB10NTAloY1gK0jSZFCwu3wqXXa.png_q60.jpg_.webp') 
         background-size cover 
      .last-show
         height 7.5rem
         width 100%
         background white
         padding-top  0.49rem
         .last-title
            display flex
            justify-content space-between
            height 0.448rem
            margin:0  0.36rem 0.36rem;
            >span:first-child           
               font-size 0.34rem
               color #000
               font-weight 700
            >span:last-child
              font-size 0.24rem
              color #999999
         .last-week
            width 100%
            height 0.368rem
            padding 0 0.36rem 0.48rem
            ul 
             display flex
             flex-direction row
             font-size 0.28rem
             color #999999
             li
              flex 1
              text-align center 
             .active  
               color #111111
         .last-wrap
            height 5.58rem
            width 100%
            padding-left 0.38rem
            margin-top 0.25rem
            ul
             display flex
             flex-direction row
             overflow-x scroll
             white-space: nowrap;
             width 100%
             height 100%
             li
              width 3rem
              margin-right 0.3rem
              >div:first-child
                  width 3rem
                  height 4.38rem
                  border-radius 0.1rem
                  background-size cover
                  img 
                    width 100%
                    height 100%
               >div:last-child
                  font-size 0.28rem
                  color #000
                  overflow hidden
                  width 3rem
                  white-space  nowrap
                  text-overflow ellipsis  
                  margin-top 0.24rem 
                  font-weight 600
                  p
                   font-weight normal 



      .more-show
        background white
        padding-top 0.9rem 
        height 100%
        h2
          font-size 0.34rem
          color #111111  
          padding-left 0.36rem
        .more-list
          ul
           display flex
           height 1.04rem
           padding-bottom 0.4rem
           li
             flex 1
             text-align center
             line-height 1.04rem
             font-size 0.28rem
             color #111111
             i 
               font-size 0.2rem
               display inline-block
               color #AAA
               margin-top -.1rem
               
           >li:last-child
             color #AAA
           >li:nth-child(3)
             color  #ff1268      
           >li:first-child
              margin-top 0   

        .hotcity
        p
         font-size 0.26rem
         color #333
         line-height 0.4rem
         padding 0.3rem 0 0 0.2rem
        ul
            display flex
            flex-direction row 
            flex-wrap wrap
            li
                height 0.72rem
                width 25%
                line-height 0.72rem
                font-size 0.268rem
                color #111 
                text-align center
                margin 0.16rem 0  0.16rem  0.3rem
                border 1px solid #AAA


    .hotcity
        p
         font-size 0.26rem
         color #333
         line-height 0.4rem
         padding 0.3rem 0 0 0.2rem
        ul
            display flex
            flex-direction row 
            flex-wrap wrap
            li
                height 0.72rem
                width 25%
                line-height 0.72rem
                font-size 0.268rem
                color #111 
                text-align center
                margin 0.16rem 0  0.16rem  0.3rem
                border 1px solid #AAA
    




    .allcity
      ol 
       background white
       li
        font-size 0.26rem
        color #333
        line-height 0.5rem
        width 100%
        h4 
         background #f2f3f4
         padding-left 0.2rem
        p
         background white
         width 100%
         padding-left 0.2rem
         line-height 0.91rem
         border-bottom 1px solid #e7e7e7

    .nav-letter{
       position fixed
       display flex
       flex-direction column
       z-index 10
       right 0.1rem
       top 1rem
       height 100%
       font-size 0.28rem
       div{
          text-align center
       }
        
       
    }    

             
             
   
</style>

